<template>
    <div class="layout" style="overflow: auto;height: 600px;">

      <Row style="margin: 20px;background-color: #fff;padding: 20px 50px;font-size: 12px;border-radius: 5px">
        <Col span="6" style="margin-bottom: 20px;">
          订单编号：<span v-text="result.orderId" style="color: gray"></span>
        </Col>
        <Col span="6">
          运单编号：<span v-text="id" style="color: gray"></span>
        </Col>
        <Col span="6" >
          下单时间：<span v-text="result.createTime" style="color: gray"></span>
        </Col>
        <Col span="6" >
          订单状态：<span v-for="s in statusList" :key="s.value" v-if="result.status==s.value"  style="color: gray">{{s.label}}</span>
        </Col>
        <Col span="6" >
          预计到达时间：<span v-text="result.estimatedArrivalTime" style="color: gray"></span>
        </Col>
      </Row>

      <el-collapse v-model="nameList" style="margin: 20px">
        <el-collapse-item title="基本信息" name="1" style="margin-bottom: 20px;border-radius: 10px;">
          <el-timeline style="margin-left: 20px;">
            <el-timeline-item icon="el-icon-location-information" size="large" color="rgb(0,0,255)" timestamp="发货方" placement="top">
              <el-card style="width: 96%;font-size: 12px;">
                <Row style="margin-bottom: 20px;">
                  <Col span="6">
                    发货方姓名：<span v-text="result.senderName" style="color: gray"></span>
                  </Col>
                  <Col span="6">
                    发货方地址：<span v-text="result.senderProvinceName+result.senderCityName+result.senderCountyName" style="color: gray"></span>
                  </Col>
                </Row>
                <Row>
                  <Col span="6">
                    发货方电话：<span v-text="result.senderPhone" style="color: gray"></span>
                  </Col>
                  <Col span="6">
                    详细地址：<span v-text="result.senderAddress" style="color: gray"></span>
                  </Col>
                </Row>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="收货方" size="large" icon="el-icon-truck" color="rgb(255,0,0)" placement="top">
              <el-card style="width: 96%;font-size: 12px;">
                <Row style="margin-bottom: 20px;">
                  <Col span="6">
                    收货方姓名：<span v-text="result.receiverName" style="color: gray"></span>
                  </Col>
                  <Col span="6">
                    收货方地址：<span v-text="result.receiverProvinceName+result.receiverCityName+result.receiverCountyName" style="color: gray"></span>
                  </Col>
                </Row>
                <Row>
                  <Col span="6">
                    收货方电话：<span v-text="result.receiverPhone" style="color: gray"></span>
                  </Col>
                  <Col span="6">
                    详细地址：<span v-text="result.receiverAddress" style="color: gray"></span>
                  </Col>
                </Row>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <i class="el-icon-s-flag" style="color: yellow;margin-left: 20px;font-size: 20px;"></i>
          <span style="font-size: 12px;margin-left: 5px;">
            距离：
            <span v-text="result.distance"></span>km
          </span>
          <span style="font-size: 12px;margin-left: 260px;">地图:</span>
          <Button type="primary" size="small" @click="flag=true" style="background-color: #fff;color: deepskyblue;margin-left: 5px;border: none">查看地图</Button>
        </el-collapse-item>

        <el-collapse-item title="费用信息" name="2" style="margin-bottom: 20px;">
          <Row style="margin-left: 20px;">
            <Col span="6">
              运费：<span v-text="result.amount" style="color: gray"></span>元
            </Col>
            <Col span="6">
              支付方式：<span v-text="result.paymentMethod==1?'预付':'到付'" style="color: gray"></span>
            </Col>
            <Col span="6">
              付款状态：<span v-text="result.paymentStatus==1?'未付':'已付'" style="color: gray"></span>
            </Col>
          </Row>
        </el-collapse-item>

        <el-collapse-item title="货品信息" name="3" style="margin-bottom: 20px;">
          <el-table
            :data="list"
            border
            style="width: 96%;margin: 0 auto;">
            <el-table-column
              label="序号"
              type="index"
              width="100"
              align="center">
              <template slot-scope="scope">
                <span>{{ (scope.$index+1)+(currentPage-1)*pageSize }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="货品名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="quantity"
              label="货品数量">
            </el-table-column>
            <el-table-column
              prop="unit"
              label="货品单位">
            </el-table-column>
            <el-table-column
              prop="goodsTypeName"
              label="货品类型">
            </el-table-column>
            <el-table-column
              prop="weight"
              label="重量（千克）">
            </el-table-column>
            <el-table-column
              prop="volume"
              label="体积（方）">
            </el-table-column>
            <el-table-column
              prop="cargoValue"
              label="货值（元）">
            </el-table-column>
            <el-table-column
              prop="cargoBarcode"
              label="条形编码">
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注">
            </el-table-column>
          </el-table>
        </el-collapse-item>

        <el-collapse-item title="取件信息" name="4" style="margin-bottom: 20px;font-size: 12px;">
          <Row style="margin-left: 20px;margin-bottom: 20px;">
            <Col span="6">
              所在网点：<span v-text="pick.cname" style="color: gray"></span>
            </Col>
            <Col span="6">
              取件类型：<span v-for="m in pickTypes" :key="m.value" v-if="pick.pickupType==m.value"  style="color: gray">{{m.label}}</span>
            </Col>
            <Col span="6">
              作业状态：<span v-for="n in workStatus" :key="n.value" v-if="pick.status==n.value" style="color: gray">{{n.label}}</span>
            </Col>
            <Col span="6">
              取件快递员：<span v-text="pick.name" style="color: gray"></span>
            </Col>
          </Row>
          <Row style="margin-left: 20px;">
            <Col span="6">
              快递员电话：<span v-text="pick.mobile" style="color: gray"></span>
            </Col>
            <Col span="6">
              预计取件时间：<span v-text="pick.estimatedEndTime" style="color: gray"></span>
            </Col>
            <Col span="6">
              取件完成时间：<span v-text="pick.confirmTime" style="color: gray"></span>
            </Col>
            <Col span="6">
              实际取件时间：<span v-text="pick.actualEndTime" style="color: gray"></span>
            </Col>
          </Row>
        </el-collapse-item>

        <el-collapse-item title="派送信息" name="5" style="margin-bottom: 20px;font-size: 12px;">
          <Row style="margin-left: 20px;margin-bottom: 20px;">
            <Col span="6">
              所在网点：<span v-text="up.cname" style="color: gray"></span>
            </Col>
            <Col span="6">
              作业状态：<span v-for="j in workStatus" :key="j.value" v-if="up.status==j.value"  style="color: gray">{{j.label}}</span>
            </Col>
            <Col span="6">
              派送快递员：<span v-text="up.name" style="color: gray"></span>
            </Col>
            <Col span="6">
              快递员电话：<span v-text="up.mobile" style="color: gray"></span>
            </Col>
          </Row>
          <Row style="margin-left: 20px;">
            <Col span="6">
              预计派送时间：<span v-text="up.estimatedEndTime" style="color: gray"></span>元
            </Col>
            <Col span="6">
              派件完成时间：<span v-text="up.confirmTime" style="color: gray"></span>
            </Col>
          </Row>
        </el-collapse-item>

        <el-collapse-item title="运输信息" name="6" style="margin-bottom: 20px;text-align: center">
          <i class="el-icon-check" style="color: blue;font-size: 40px;"></i>
          <el-row style="margin: 5px 0;"><el-col v-text="task.startName"></el-col></el-row>
          <el-card style="width: 20%;font-size: 12px;margin: 0 auto;border-radius: 10px;background-color: #b1c7de">
            <Row>
              <Col span="8">预计到达：</Col>
              <Col span="16" v-text="task.endName" style="color: gray"></Col>
            </Row>
            <Row>
              <Col span="8">运输任务：</Col>
              <Col span="16" v-text="task.id" style="color: gray"></Col>
            </Row>
            <Row>
              <Col span="8">车辆：</Col>
              <Col span="16" v-text="task.brand" style="color: gray"></Col>
            </Row>
            <Row>
              <Col span="8">司机：</Col>
              <Col span="16" v-text="task.name" style="color: gray"></Col>
            </Row>
            <Row>
              <Col span="8">到达时间：</Col>
              <Col span="16" v-text="task.actualArrivalTime" style="color: gray"></Col>
            </Row>
          </el-card>
        </el-collapse-item>

        <el-collapse-item title="订单轨迹" name="7" style="margin-bottom: 20px;" >
          <div id="container2" >
            <div id="panel2"></div>
          </div>
        </el-collapse-item>

      </el-collapse>


      <Row style="margin: 20px 0;">
        <Col span="24" style="text-align: center">
            <Button size="large" style="width: 140px;" to="/sp-logistics/sp-transport">返回</Button>
        </Col>
      </Row>

      <Modal v-model="flag" :footer-hide="true" fullscreen title="查看地图">
        <div id="container1" >
<!--          <div id="panel1"></div>-->
        </div>
      </Modal>
    </div>
</template>
<script>
import axios from 'axios'
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
    data(){
      return{
        id: this.$route.query.id,
        list:[],
        result:{},
        nameList: ["1","2", "3","4","5","6","7"],
        currentPage: 1,
        pageSize: 3,
        task: {},
        pick:{},
        up:{},
        flag :false,
        statusList: [
          {
            value: '1',
            label: '待取件'
          }, {
            value: '2',
            label: '已取件'
          }, {
            value: '3',
            label: '网点入库'
          }, {
            value: '4',
            label: '待装车'
          }, {
            value: '5',
            label: '运输中'
          }, {
            value: '6',
            label: '网点出库'
          }, {
            value: '7',
            label: '待派送'
          }, {
            value: '8',
            label: '派送中'
          }, {
            value: '9',
            label: '已签收'
          }, {
            value: '10',
            label: '拒收'
          }, {
            value: '11',
            label: '已取消'
          }], //订单状态
        pickTypes:[
          {
            value: '1',
            label: '网点自寄'
          },
          {
            value: '2',
            label: '上门取件'
          },
        ],
        workStatus: [
          {
            value: '1',
            label: '待执行'
          },
          {
            value: '2',
            label: '进行中'
          },
          {
            value: '3',
            label: '待确认'
          },
          {
            value: '4',
            label: '已完成'
          },
          {
            value: '5',
            label: '已取消'
          },
        ],
        map: null,
        p:{},
        locus:[]
      }
    },
  created(){
    // console.log(id)
    this.queryOrderBasicInfo();
    this.queryOrderCargoInfo();
    this.queryTaskInfo();
    this.queryPickInfo();
    this.queryUpInfo();
    this.queryMapLocusInfo();
  },
  mounted() {
    window._AMapSecurityConfig = {
      securityJsCode: 'aa26195143721cc58d20294c8e672ed8' // 申请key对应的秘钥
    }
    //DOM初始化完成进行地图初始化
    setTimeout(() => {
      this.initMap1();
    }, 1000)

    setTimeout(() => {
      this.initMap(); // 异步加载（否则报错initMap is not defined）
    },1000);
  },
  methods:{
      // 查询订单基本信息
    queryOrderBasicInfo:async function(){
      var rsp = await axios.post("/api/pd-workyc/pd-transport-order/queryOrderBasicInfo/"+this.id);
      // console.log(rsp.data);
      this.result = rsp.data;
      },
    // 查询订单货品信息
    queryOrderCargoInfo:async function(){
      var rsp = await axios.post("/api/pd-workyc/pd-transport-order/queryOrderCargoInfoById/"+this.id);
      // console.log(rsp.data);
      this.list = rsp.data;
    },
    // 查询运输任务信息
    queryTaskInfo:async function(){
      var rsp = await axios.post("/api/pd-workyc/pd-transport-order/queryTaskInfoById/"+this.id);
      // console.log(rsp.data);
      this.task = rsp.data;
    },
    // 查询取件任务信息
    queryPickInfo: async function(){
      var rsp = await axios.post("/api/pd-workyc/pd-transport-order/queryPickInfoById/"+this.id+"/1");
      // console.log(rsp.data);
      this.pick = rsp.data;
    },
    //查询派件任务信息
    queryUpInfo:async function(){
      var rsp = await axios.post("/api/pd-workyc/pd-transport-order/queryPickInfoById/"+this.id+"/2");
      // console.log(rsp.data);
      this.up = rsp.data;
    },
    // 查询起始地经纬度
    queryMapLocusInfo:async function(){
      var rsp = await axios.post("/api/pd-workyc/pd-transport-order/queryMapLocusInfo/"+this.id);
      // console.log(rsp.data);
      this.p = rsp.data;
      this.locus = [this.p.startLongitude,this.p.startLatitude];
      // console.log(this.pos);

    },
    // 初始化地图
    initMap(){
      AMapLoader.load({
        key: '107b7f4763513ea26105a82ea6820c5c', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then(AMap => {
        this.map = new AMap.Map('container1', {
          resizeEnable: true, // 窗口大小调整
          center: this.firstArr, // 中心 firstArr: [116.478935, 39.997761],
          zoom:8
        })
        // 添加maker
        this.marker = new AMap.Marker({
          map: this.map,
          position: this.locus,
          icon: "https://lbs.amap.com/demo/amap-ui/demos/amap-ui-pathsimplifier/index/imgs/car.png",
          offset: new AMap.Pixel(-26, -13), // 调整图片偏移
          autoRotation: true, // 自动旋转
          angle: -100 // 图片旋转角度
        });

        AMap.plugin(['AMap.ToolBar', 'AMap.Driving'], () => {
        })

        //构造路线导航类
        this.driving = new AMap.Driving({
          map: this.map,
          // panel: "panel1"
        });
        // 根据起终点经纬度规划驾车导航路线
        this.driving.search(new AMap.LngLat(this.p.startLongitude, this.p.startLatitude), new AMap.LngLat(this.p.endLongitude, this.p.endLatitude), function (status, result) {
          // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          if (status === 'complete') {
            console.log('绘制驾车路线完成')
          } else {
            console.log('获取驾车数据失败：' + result)
          }
        });
      }).catch(e => {
        console.log(e)
      })
    },
    initMap1(){
      AMapLoader.reset();
      AMapLoader.load({
        key: '107b7f4763513ea26105a82ea6820c5c', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then(AMap => {
        this.map = new AMap.Map('container2', {
          resizeEnable: true, // 窗口大小调整
          center: this.firstArr, // 中心 firstArr: [116.478935, 39.997761],
          zoom:5
        })
        // 添加maker
        this.marker = new AMap.Marker({
          map: this.map,
          position: this.locus,
          icon: 'https://webapi.amap.com/images/car.png',
          offset: new AMap.Pixel(-26, -13), // 调整图片偏移
          autoRotation: true, // 自动旋转
          angle: -100 // 图片旋转角度
        });

        AMap.plugin(['AMap.ToolBar', 'AMap.Driving'], () => {
        })

        //构造路线导航类
        this.driving = new AMap.Driving({
          map: this.map,
          panel: "panel2"
        });
        // 根据起终点经纬度规划驾车导航路线
        this.driving.search(new AMap.LngLat(this.p.startLongitude, this.p.startLatitude), new AMap.LngLat(this.p.endLongitude, this.p.endLatitude), function (status, result) {
          // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          if (status === 'complete') {
            console.log('绘制驾车路线完成')
          } else {
            console.log('获取驾车数据失败：' + result)
          }
        });
      }).catch(e => {
        console.log(e)
      })
    },
    handleChange(val) {
      // console.log(val);
    }
  }
}
</script>

<style scoped>
.layout{
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 15px;
  height: 640px;
}

#container1{
  height: 650px;
  width: 90%;
  margin: 0 auto;
  position: relative;
}

#panel1{
  position: absolute;
  right: 0;
  top: 0;
  width: 250px;
  z-index: 1;
}

#container2{
  height: 550px;
  width: 90%;
  margin: 0 auto;
  position: relative;
}

#panel2{
  position: absolute;
  right: 0;
  top: 0;
  width: 220px;
  z-index: 1;
}


</style>
